<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- 引入导航栏&登陆注册样式 -->
    <link rel="stylesheet" href="./css/icon.css">
    <link rel="stylesheet" href="./css/reg.css">
    <link rel="stylesheet" href="./css/header.css">
    <!-- 设置样式&引入图标 -->
    <link rel="stylesheet" href="./public/icon.css">
    <link rel="stylesheet" href="./css/main.css">
    <!-- 引入jq -->
    <script src="./lib/jquery.min.js"></script>
    <!-- 引入导航栏&登陆注册Js -->
    <script src="./js/control.js"></script>
    <script src="./js/reg.js"></script>
    <!-- 标题 -->
    <title>沈理论坛</title>
</head>

<body>
    <div id="layout">
        <!-- 主界面 -->
        <div id="homepage">
            <!-- 导入导航栏&登陆注册页 -->
            <div id="Header"></div>
            <div id="Reg"></div>
            <script>
                $("#Header").load("./html/header.html");
                $("#Reg").load("./html/reg.html");
            </script>
            <!-- 主体内容 -->
            <div class="main">
                <!-- 轮播展示页 -->
                <ul class="slides">
                    <input type="radio" class="control-1" name="control" checked>
                    <input type="radio" class="control-2" name="control">
                    <li class="slide slide-1"><a href="#card-1" class="character-1">立即体验</a></li>
                    <li class="slide slide-2"><a href="#card-1" class="character-1">立即体验</a></li>
                    <div class="controls-visible">
                        <label for="control-1"></label>
                        <label for="control-2"></label>
                    </div>
                </ul>
                <!-- 功能入口板块 -->
                <div class="card card-1" id="card-1">
                    <a href="#" class="show show-1">
                        <h1 class="show-4">文章发现</h1>
                        <p class="show-5">优质文章<br> 等待你来发现
                        </p>
                    </a>
                    <a href="#" class="show show-2">
                        <h1 class="show-4">资源共享</h1>
                        <p class="show-5">海量资源<br> 降低搜寻成本
                        </p>
                    </a>
                    <a href="#" class="show show-3">
                        <h1 class="show-4">问答专区</h1>
                        <p class="show-5">有问必答<br> 共同解决疑问困惑
                        </p>
                    </a>
                </div>

                <div class="card card-2">
                    <!-- 每日优选 -->
                    <div class="optimize">
                        <div class="optimize-1">
                            <h1 class="optimize-2">每日优选</h1>
                            <p class="optimize-3">内容尝鲜，每日优质内容推荐</p>
                        </div>
                        <div class="optimize-5">
                            <a href="" class="optimize-4">
                                <div class="optimize-title"></div>
                                <div class="optimize-picture">
                                    <img src=".\public\optimize-picture.png" alt="优选图片" class="optimize-picture">
                                </div>
                                <span class="optimize-content"></span>
                                <span class="iconfont icon-yanjing">&#xe8bf;</span>
                                <span class="iconfont icon-dianzan">&#xe8ad;</span>
                                <span class="iconfont icon-pinglun">&#xe8b4;</span>
                            </a>
                            <a href="" class="optimize-4">
                                <div class="optimize-title">ITAB标签页是什么</div>
                                <div class="optimize-picture">
                                    <img src=".\public\optimize-picture.png" alt="优选图片" class="optimize-picture">
                                </div>
                                <span class="optimize-content">123123</span>
                                <span class="iconfont icon-yanjing">&#xe8bf;</span>
                                <span class="iconfont icon-dianzan">&#xe8ad;</span>
                                <span class="iconfont icon-pinglun">&#xe8b4;</span>
                            </a>
                            <a href="" class="optimize-4">
                                <div class="optimize-title">ITAB标签页是什么</div>
                                <div class="optimize-picture">
                                    <img src=".\public\optimize-picture.png" alt="优选图片" class="optimize-picture">
                                </div>
                                <span class="optimize-content">123123</span>
                                <span class="iconfont icon-yanjing">&#xe8bf;</span>
                                <span class="iconfont icon-dianzan">&#xe8ad;</span>
                                <span class="iconfont icon-pinglun">&#xe8b4;</span>
                            </a>
                        </div>

                    </div>
                    <!-- 工作室介绍 -->
                    <div class="introduce">
                        <h1 class="name">琴理工作室</h1>
                        <img src="./public/qinli.png" alt="琴理工作室" class="name-logo">
                        <p class="introduce-1">琴理工作室成立于2016</p>
                        <p class="introduce-1">是由沈阳理工大学教务处组建的学生开发团队</p>
                        <p class="introduce-1">工作室成立的首要目的是开发并维护</p>
                        <p class="introduce-1">沈阳理工移动教务应用“掌上沈理”</p>
                        <p class="introduce-1">工作室现设的功能部门共六个：</p>
                        <p class="introduce-1">产品、视觉、前端、后端、运维、运营</p>
                    </div>
                </div>
                <!-- 资源推荐 -->
                <div class="card card-3">
                    <div class="resource-1">
                        <h1 class="resource-2">资源推荐</h1>
                        <p class="resource-3">海量资源共享，降低搜寻成本</p>
                    </div>
                    <div class="resource-4">
                        <div class="resource-6">
                            <div class="resource-5">今日推荐</div>
                            <div class="resource-7">
                                <a href="" class="resource-card">
                                    <img class="resource-img" src="./public/resource-image.png" alt="推荐图片">
                                    <div class="resource-card-content">11111</div>
                                </a>
                                <a href="" class="resource-card">
                                    <img class="resource-img" src="./public/resource-image.png" alt="推荐图片">
                                    <div class="resource-card-content">22222</div>
                                </a>
                                <a href="" class="resource-card">
                                    <img class="resource-img" src="./public/resource-image.png" alt="推荐图片">
                                    <div class="resource-card-content">33333</div>
                                </a>
                                <a href="" class="resource-card">
                                    <img class="resource-img" src="./public/resource-image.png" alt="推荐图片">
                                    <div class="resource-card-content">44444</div>
                                </a>
                            </div>
                        </div>
                        <div class="resource-6">
                            <div class="resource-5">推荐总榜</div>
                            <div class="resource-8">
                                <span class="resource-9 num1">&nbsp;1&nbsp;</span>
                                <a href="" class="resource-word">星巴克涨价</a>
                            </div>
                            <div class="resource-8">
                                <span class="resource-9 num2">&nbsp;2&nbsp;</span>
                                <a href="" class="resource-word">星巴克涨价</a>
                            </div>
                            <div class="resource-8">
                                <span class="resource-9 num3">&nbsp;3&nbsp;</span>
                                <a href="" class="resource-word">星巴克涨价</a>
                            </div>
                            <div class="resource-8">
                                <span class="resource-9 num4">&nbsp;4&nbsp;</span>
                                <a href="" class="resource-word">星巴克涨价</a>
                            </div>
                            <div class="resource-8">
                                <span class="resource-9 num4">&nbsp;5&nbsp;</span>
                                <a href="" class="resource-word">星巴克涨价</a>
                            </div>
                        </div>

                    </div>
                </div>
                <!-- 问答专区 -->
                <div class="card card-4">
                    <div class="question">
                        <h1 class="question-1">问答专区</h1>
                        <p class="question-2">解决你的学习疑问，清除阻碍</p>
                        <div class="question-3">
                            <div class="question-4">
                                <div class="question-5">问答热点</div>
                                <div class="question-6">
                                    <span class="question-hot question-one">1</span>
                                    <span class="question-ques">问：</span>
                                    <div class="question-content">答：</div>
                                    <span class="iconfont icon-yanjing question-icon">&#xe8bf;</span>
                                    <span class="iconfont icon-dianzan question-icon">&#xe8ad;</span>
                                    <span class="iconfont icon-pinglun question-icon">&#xe8b4;</span>
                                </div>
                                <div class="question-6">
                                    <span class="question-hot question-two">2</span>
                                    <span class="question-ques">问：</span>
                                    <div class="question-content">答：</div>
                                    <span class="iconfont icon-yanjing question-icon">&#xe8bf;</span>
                                    <span class="iconfont icon-dianzan question-icon">&#xe8ad;</span>
                                    <span class="iconfont icon-pinglun question-icon">&#xe8b4;</span>
                                </div>
                                <div class="question-6">
                                    <span class="question-hot question-three">3</span>
                                    <span class="question-ques">问：</span>
                                    <div class="question-content">答：</div>
                                    <span class="iconfont icon-yanjing question-icon">&#xe8bf;</span>
                                    <span class="iconfont icon-dianzan question-icon">&#xe8ad;</span>
                                    <span class="iconfont icon-pinglun question-icon">&#xe8b4;</span>
                                </div>
                            </div>
                            <div class="question-4">
                                <div class="question-5">等待解答</div>
                                <div class="question-7">
                                    问：
                                    <button class="question-btn">去回答</button>
                                </div>
                                <div class="question-7">
                                    问：
                                    <button class="question-btn">去回答</button>
                                </div>
                                <div class="question-7">
                                    问：
                                    <button class="question-btn">去回答</button>
                                </div>
                                <div class="question-7">
                                    问：
                                    <button class="question-btn">去回答</button>
                                </div>
                                <div class="question-7">
                                    问：
                                    <button class="question-btn">去回答</button>
                                </div>
                                <div class="question-7">
                                    问：
                                    <button class="question-btn">去回答</button>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

            </div>
            <!-- 底部链接 -->
            <div class="bottom-link">
                <p class="bottom-word">琴理工作室<br> 工作室地址：沈阳理工大学综合楼C区312
                    <br> 交流群号：262993927
                    <br> 论坛BUG反馈群：665345038
                    <br> 友情链接：
                </p>
                <a target="_blank" href="http://jwc.sylu.edu.cn/" class="teach-website">教学网</a>
                <a target="_blank" href="http://www.sylu.edu.cn/" class="official-website">学校官网</a>
            </div>
        </div>
    </div>
</body>

</html>